<template>
  <div>
    <div>
      <el-row style="margin-bottom:10px">
        <el-col :span="8" >
          <h4 style="margin:0">
            <span>用户管理</span>
            <el-button v-show="showCuser" type="success" class="addBtn" @click="addCpipoFun" v-if="userRole.MG_401005"><i class="el-icon-plus"></i>发布账号</el-button>
          </h4>
        </el-col>
        <el-col :span="16" style="text-align:right">
          
        </el-col>
      </el-row>
     
      <el-row>
        <el-col :span="20" :offset="4" v-show="!showCuser" style="position:absolute;text-align:right;z-index:2">
          <span style="padding-right:20px">共：{{countTotal}} 用户</span>
         <el-select  v-model="area" clearable placeholder="选择省份" style="width:130px" @change="changeCity">
            <el-option v-for="item in oders" :key="item.value" :label="item.areaname" :value="item.id"></el-option>
        </el-select>
         <el-select  v-model="obj.city"  clearable placeholder="请选择城市" style="width:130px">
            <el-option v-for="item in citys" :key="item.value" :label="item.areaname" :value="item.id"></el-option>
        </el-select>
          <el-select  v-model="obj.seachType" placeholder="请选择" style="width:100px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input v-model="obj.keyword" style="width:300px" placeholder="手机号／昵称"></el-input>
          <el-button type="primary" @click="sheachFun">搜索</el-button>
        </el-col>
      
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部账号" name="first">
          <Uelist ref="chifun"></Uelist>
        </el-tab-pane>
        <el-tab-pane label="发布账号" name="third" v-if="userRole.MG_401006">
          <Ue-Clist ref="ClistName"></Ue-Clist>
        </el-tab-pane>
        
      </el-tabs>
     
   
    </div>
  
   
   <AddCuser v-if="dialogPipo" ref="adduser" :dialogPipo="dialogPipo" @showFun ="closePipo"></AddCuser>
   
  </div>
</template>

<script>
  import AddCuser from './content/AddCuser'
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  import Uelist from './content/Uelist'
  import UeClist from './content/UeClist'
  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        adduserSta:false,
        dialogPipo:false,
        showCuser:false,
        countTotal:0,
        area:'',
        obj:{
          city:'',
          seachType:0,
          keyword:''
        },
        oders:[],
        citys:[],
        options:[
          {value:0,label:'全部'},
          {value:1,label:'牙齿矫正' },
          {value:2, label:'口腔健康' },
          {value:3,label:'儿童口腔'},
          {value:4,label:'种植牙'}
        ],
        activeName: 'first',
       
      }
    },
    components:{
      AddCuser,
      Uelist,
      UeClist
    },
    mounted() {
      var obj = document.getElementById('centerbox')
      obj.addEventListener('scroll', this.handleScroll,true)
    },
    destroyed(){
      
      var obj = document.getElementById('centerbox')
      obj.removeEventListener('scroll', this.handleScroll,true)
    },
    created() {
      Http.countUserNumer()
      .then( res => {
        this.countTotal = res.data.data.total
      })
      .catch( error => {
        
      })
      Http.getAreaList(0)
        .then( res => {
          this.oders = res.data.data;
        })
    },
    methods: {
      handleClick(tab, event) {
        if(tab.name == 'third') {
          this.showCuser = true;
        } else {
          this.showCuser = false;
        }
      },
      handleScroll() {
        var scollobj = document.getElementById('centerbox');
        var scrollTop = scollobj.scrollTop;
        const obj = document.getElementById('tab-first');
        const myobj = obj.parentNode.parentNode;
        if(scrollTop> 32){
          myobj.style.position = 'fixed';
          myobj.style.top = 0;
        } else {
          myobj.style.position = 'relative';
        }
        
      },
       //获取地址部分
      changeCity(val,city=''){
        this.okLng = 0;
        Http.getAreaList(val)
          .then( res => {
            this.obj.city = '';
            this.citys = res.data.data;
            
          })
      },
      addCpipoFun() {
        this.dialogPipo = true;
        this.adduserSta = true;
      },
      closePipo() {
        this.dialogPipo = false;
        this.adduserSta = false;
        this.$refs.ClistName.getCuser()
      },

       //搜索
      sheachFun(){
        this.$refs.chifun.searchFun(this.obj);
      }
    }
  }
</script>
<style>
.box{
  border-bottom:1px solid red;
}
.test{
    border:1px solid #ccc;
}
.drag-item{
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin: auto;
    position: relative;
    
    background: #ddd;
    margin:20px 5px;
}
.ghostClass{
    opacity: 1;
}
.bottom{
    width: 200px;
    height: 50px;
    position: relative;
    background: blue;
    top:2px;
    left: 2px;
    transition: all .5s linear;
}
.el-tabs__nav-wrap::after{
  width:0;
}
</style>
